<template>
	<view>
		<ttBar leftIcon="icon-back" title="招商佣金"></ttBar>
		
		<view class="tabHead">
			<text :class="[status==0?'active':'']" @tap="toggleType(0)">待到账</text>
			<text :class="[status==1?'active':'']"  @tap="toggleType(1)">已到账</text>
			<text :class="[status==2?'active':'']"  @tap="toggleType(2)">已失效</text>
		</view>
		<view class="tabCnt">
			<view class="cntItem">
				<text>订单数</text>
				<text>{{total}}</text>
			</view>
			<view class="cntItem">
				<text>付款金额</text>
				<text>￥{{amount}}</text>
			</view>
			<view class="cntItem">
				<text>预估收入</text>
				<text class="yugu">￥{{income}}</text>
			</view>
		</view>
		<view class="list">
			<block v-for="(item,index) in list" :key="index" >
				<view class="row">
					<view class="statusBox">
						<!-- <text class="status">{{statusArr[item.status]}}</text> -->
						<text>订单金额：￥{{item.price}}</text>
					</view>
					<view class="orderInfo">
						<text class="goodName">{{item.name}}</text>
						<text class="orderNo">订单编号:{{item.orderNo}}</text>
					</view>
					<view class="timeBox">
						<text class="time">{{item.createTime}}</text>
						<text>预估收入:</text>
						<text class="yugu">￥{{item.estimatedAmount}}</text>
					</view>
				</view>
			</block>
			<empty-box v-if="list.length<1"></empty-box>
			
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo
			})
		},
		data() {
			return {
				status:0,		//2待到账  3已到账  4已失效,
				hasNext:true,
				page_no:1,
				list:[],
				total:0,
				income:0,
				amount:0
				// statusArr:['','','','','已到账','待到账','已失效','已失效','','已到账'],
			};
		},
		methods:{
			toggleType(e){
				this.status=parseInt(e);
				// this.page_no=1;
				this.hasNext=true;
				this.list=[];
				this.getData();
			},
			getData(){
				if(this.hasNext){
					this.$store.dispatch("apiGetDistionCommzhaoshang",{
						userId:this.userInfo.userId,
						// userId:107,	
						status:this.status
					}).then(res=>{
						
						this.total=res.data.data.Total;
						this.amount=res.data.data.amount;
						
						this.income=res.data.data.income;
						this.list=this.list.concat(res.data.data.Items);
						// this.hasNext=res.data.data.hasNext;
						// this.page_no=res.data.data.nextPage;
						// if(this.list.length){
						// 	this.list.forEach(x=>{
						// 		if(this.userInfo.userId==x.agent1){
						// 			x.shouru=x.amount1
						// 		}else if(this.userInfo.userId==x.agent2){
						// 			x.shouru=x.amount2
						// 		}else{
						// 			x.shouru=0
						// 		}
						// 	})
						// }
					})
				}else{
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none'
					});
				}
			},
			
		},
		onLoad() {
			this.getData();

			
		},
		// 页面滚动到底部
		onReachBottom() {
			// this.getData();
			uni.showToast({
				title: '没有更多数据了',
				icon: 'none'
			});
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.page_no=1;
				this.hasNext=true;
				this.list=[];
				this.getData();
				uni.stopPullDownRefresh();
			}, 1500)
		}
		
	}
</script>

<style lang="less">
	
	.enterBox{
		display: flex;
		justify-content: space-around;
		background-color: #FFFFFF;
		.enterItem{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-bottom: 20upx;
			padding-left: 20upx;
			padding-right: 20upx;
			text{
				font-size: 28upx;
			}
			.iconfont{
				width: 90upx;
				height: 90upx;
				border-radius: 50%;
				line-height: 90upx;
				text-align: center;
				font-size: 56upx;
				background: linear-gradient(135deg,#ffc62a,#ff9f2e);
				color: #FFFFFF;
				margin-bottom: 26upx;
			}
		}
	}
	page {
		background-color: #f6f6f6;
	}

	.card {
		padding: 14upx 30upx;
		background-color: #FFFFFF;
		padding-bottom: 60upx;
		.cardBox {
			height: 260rpx;
			background-image: linear-gradient(0deg, #da2c5c 0%, #e22f43 100%), linear-gradient(#e9ddd1, #e9ddd1);
			border-radius: 14rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			color: #FFFFFF;
			font-size: 28upx;
			padding: 28upx 40upx;
			position: relative;

			.count {
				align-self: center;
				font-size: 48upx;
				font-weight: bold;
			}

			.tishi {
				font-size: 24upx;
			}

			button {
				position: absolute;
				height: 64upx;
				right: -6upx;
				top: 34upx;
				border: 2upx solid #da2c5c;
				line-height: 60upx;
				font-size: 28upx;
				color: #e12f45;
				border-radius: 32upx 0upx 0upx 32upx;
			}
		}

		.ts {
			display: flex;
			align-items: flex-start;
			font-size: 32upx;
			padding-top: 20upx;

			.iconfont {
				font-size: 44upx;
				color: #ffb423;
				margin-right: 10upx;
			}
		}
	}

	.tabHead {
		height: 90upx;
		display: flex;
		justify-content: space-around;
		border-bottom: 2upx solid #f2f2f2;
		border-top: 2upx solid #f2f2f2;
		background-color: #FFFFFF;

		text {
			font-size: 32upx;
			line-height: 82upx;
			border-bottom: 6upx solid rgba(0, 0, 0, 0);
			color: #202932;
		}

		.active {
			color: #f79f21;
			border-bottom: 6upx solid #f79f21;
		}
	}

	.tabCnt {
		display: flex;
		background-color: #FFFFFF;

		.cntItem {
			width: 33.33%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 46upx;
			padding-bottom: 20upx;

			text {
				font-size: 32upx;
				color: #202932;
			}

			text:first-child {
				color: #8a8a8a;
				margin-bottom: 20upx;
			}

			.yugu {
				color: #f92121;
			}
		}
	}

	.list {
		display: flex;
		flex-direction: column;
		padding: 18upx;

		.row {
			background-color: #FFFFFF;
			box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
			border-radius: 10upx;
			display: flex;
			flex-direction: column;
			padding: 20upx 30upx;
			margin-bottom: 16upx;
			.statusBox{
				display: flex;
				align-items: center;
				font-size: 32upx;
				justify-content: space-between;
				margin-bottom: 20upx;
				.status{
					font-size: 28upx;
					height: 40upx;
					line-height: 40upx;
					padding: 0 20upx;
					border-radius: 20upx;
					color: #FFFFFF;
					background-color: #ffb423;
				}
			}
			.orderInfo{
				display: flex;
				flex-direction: column;
				font-size: 32upx;
				text{
					margin-bottom: 10upx;
				}
				.orderNo{
					color: #979797;
				}
			}
			.timeBox{
				display: flex;
				align-items: center;
				font-size: 28upx;
				.time{
					flex-grow: 1;
					color: #979797;
				}
				.yugu{
					color: #ff2020;
				}
			}
		}
	}
</style>
